<template>
	<view class="container">
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="1===TabCur?'text-green cur':''" @tap="tabSelect" :data-id="1">
				可指派设备
			</view>
			<view class="cu-item" :class="2===TabCur?'text-green cur':''" @tap="tabSelect" :data-id="2">
				已指派设备
			</view>
		</scroll-view>
		<view class="" v-if="TabCur===1">
			<view class="example">
			<uni-list :border="true">
					<!-- 显示圆形头像 -->
					<uni-list-chat v-for="(item, index) in dataList"
			      :avatar-circle="true"
				  :title="item.devNum" 
				  :avatar="item.avatar?'item.avatar':static_url+'work/jiqi.png'"
			      :note="`SN:`+item.devSn">
				  <view class="chat-custom-right">
				  				<uni-tag text="绑定" type="success" @click="bingDevice(item.deviceId)"/>
				  			</view>
					</uni-list-chat>
			</uni-list>
			<uni-load-more :status="status" @clickLoadMore="onBottom()" :content-text="contentText"></uni-load-more>
			</view>
		</view>
		<view class="" v-if="TabCur===2">
			<view class="example">
			<uni-list :border="true">
					<!-- 显示圆形头像 -->
				<uni-list-chat v-for="(item, index) in bindList"
			      :avatar-circle="true" 
				  :title="item.devNum" 
				  :note="`SN:`+item.devSn"
				  :avatar="item.avatar?'item.avatar':static_url+'work/jiqi.png'">
				  <view class="chat-custom-right">
				  				<uni-tag text="解绑" type="error" @click="untieDevice(item.deviceId)"/>
				  			</view>
				  					</uni-list-chat>
				</uni-list-chat>
			</uni-list>
			<uni-load-more :status="bindStatus" @clickLoadMore="bindBottom()" :content-text="contentText"></uni-load-more>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog cancelText="关闭" confirmText="确定" title="通知" content="确定要绑定该设备吗？" @confirm="dialogConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="bindDialog" type="dialog">
				<uni-popup-dialog cancelText="关闭" confirmText="确定" title="通知" content="确定要解绑该设备吗？" @confirm="bindConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		selectCanRelList,
		untieBySn,
		bindById,
		selectBindList
	} from "@/api/company/device.js"
	import myCalendar from "@/uni_modules/uview-ui/components/my-calendar/my-calendar.vue"
import moment from "moment"
	export default {
		components: {
			myCalendar
		},
		data() {
			return {
				static_url: getApp().globalData.config.appInfo.static_image_url,
				status: 'more',
				bindStatus:'more',
				total: 0,
				bindTotal:0,
				formData:{
					empId:null,
					deviceId:null
				},
				untieData:{
					deviceId:null
				},
				contentText: {
									contentdown: '查看更多',
									contentrefresh: '加载中',
									contentnomore: '没有更多'
								},
				query:{
					pageNum:0,
					pageSize:10,
					companyId:this.$store.getters.companyId,
					
				},
				bindQuery:{
					empId:null,
					pageNum:0,
					pageSize:10,
					companyId:this.$store.getters.companyId,
				},
				dataList:[],
				bindList:[],
				TabCur: 1,
				scrollLeft: 0,
				
			}
		},
		onLoad(options) {
			let empId = JSON.parse(decodeURIComponent(options.user));
			this.formData.empId = empId;
			this.bindQuery.empId = empId;
		},
		mounted() {
		},
		onShow(){
			this.refreshDataList()
		},
		onBackPress() {

		},
		onReachBottom() {
			if(this.TabCur===1){
				this.onBottom()
			}else if(this.TabCur===2){
				this.bindBottom()
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			//刷新列表
			refreshDataList(){
				this.query.pageNum=0
				this.bindQuery.pageNum=0
				this.bindStatus='more'
				this.status = 'more'
				this.dataList = []
				this.bindList = []
				this.getCanRelList()
				this.getBindList()
			},
			onBottom() {
				let limit = this.query.pageNum * this.query.pageSize
				if(this.total>limit){
					this.getCanRelList()
				}
			},
			bindBottom(){
				let limit = this.bindQuery.pageNum * this.bindQuery.pageSize
				if(this.bindTotal>limit){
					this.getBindList()
				}
			},
			bingDevice(item){
				this.$refs.alertDialog.open();
				this.formData.deviceId = item
			},
			untieDevice(item){
				this.$refs.bindDialog.open();
				this.untieData.deviceId = item
			},
			getCanRelList(){
				this.query.pageNum = this.query.pageNum+1;
				this.status = 'loading'
				uni.showLoading()
				selectCanRelList(this.query).then(response => {
					uni.hideLoading()
					this.total = response.total
					let resultData = response.rows
					for (let i = 0; i < resultData.length; i++) {
					    this.dataList.push(resultData[i]);
					}
				  // 判断总条数如果是最大则改为没有更多
				  if (this.dataList.length >= response.total) {
				  	  this.status = 'no-more';
				      }else{
				  		this.status = 'more';
				  	}
				  })
			},
			getBindList(){
				this.bindQuery.pageNum = this.bindQuery.pageNum+1;
				this.bindStatus = 'loading'
				uni.showLoading()
				selectBindList(this.bindQuery).then(response => {
					uni.hideLoading()
					this.bindTotal = response.total
					let resultData = response.rows
					for (let i = 0; i < resultData.length; i++) {
					    this.bindList.push(resultData[i]);
					}
				  // 判断总条数如果是最大则改为没有更多
				  if (this.bindList.length >= response.total) {
				  	  this.bindStatus = 'no-more';
				      }else{
				  		this.bindStatus = 'more';
				  	}
				  })
			},
			dialogConfirm(){
				let that = this
				uni.showLoading()
				bindById(that.formData).then(res => {
							if (res.code == 200) {
								uni.hideLoading()
								that.$modal.msgSuccess("绑定成功!")
								this.refreshDataList()
							} else {
								that.$modal.loading(res.msg)
								this.refreshDataList()
							}
						})
				this.$refs.alertDialog.close();	
			},
			bindConfirm(){
				let that = this
				uni.showLoading()
				untieBySn(that.untieData).then(res => {
							if (res.code == 200) {
								uni.hideLoading()
								that.$modal.msgSuccess("解绑成功!")
								this.refreshDataList()
							} else {
								that.$modal.loading(res.msg)
								this.refreshDataList()
							}
						})
				this.$refs.bindDialog.close();	
			},
			
		}
	}
</script>

<style>
	page {
		height: 101%;
	}
</style>

<style lang="scss" scoped>
	.chat-custom-right{
		margin-top: 9px;
	}
	.plantask {
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.planTop {
		display: flex;
		flex-flow: row;
		justify-content: flex-start;
		align-items: center;
	}

	.title {
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
